{% extends 'game/base.html' %}
{% block style %}
	.game_rank{
		width:100%;
		height:80%;
	}
    .btn_list{
        width:100%;
        height:20%;
    }
{% endblock %}
{% block main %}
    <div id='like_echarts' class='game_rank' ></div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
    var like_echarts = echarts.init(document.getElementById('like_echarts'));
    option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            data: {{ tag_list|safe }}
          },
          series: [
            {
              name: '用户登陆数',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              label: {
                position: 'inner',
                fontSize: 14
              },
              labelLine: {
                show: false
              },
              data: [
                  {% for data in true_data[0:5] %}
                      {value: {{data[1]}},name: '{{data[0]}}'},
                  {% endfor %}
              ]
            },
            {
              name: '用户喜爱数',
              type: 'pie',
              radius: ['45%', '60%'],
              labelLine: {
                length: 30
              },
              label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#6E7079',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: [
                  {% for data in like_data %}
                      {value: {{data[1]}},name: '{{data[0]}}'},
                  {% endfor %}
              ]
            }
          ]
    };
    like_echarts.setOption(option);
    </script>
{% endblock %}